<!-- 字体切换大小
 子组件传递了size属性给父组件
-->
<template>
    <div style="margin-top: 5px; cursor: pointer;" title="字体尺寸">
        <el-dropdown trigger="click" @command="handerCommand">
            <span class="el-dropdown-link">
                <i class="iconfont icon-zitidaxiao"></i>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :icon="CaretRight" command ='large' :disabled="size=='large'">{{$t('font.oversize')}}</el-dropdown-item>
                    <el-dropdown-item :icon="CaretRight" command ='default' :disabled="size=='default'">{{ $t('font.default')}}</el-dropdown-item>
                    <el-dropdown-item :icon="CaretRight" command ='small' :disabled="size=='small'">{{ $t('font.less') }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
import { CaretRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
 let size = ref('default')
  //刷新的时候把存储起来的值赋给size
size.value = localStorage.getItem('size') as string
//把size属性传递给父组件
const emit = defineEmits<{(e:'changeSize',size:string):void}>()
//点击时把回调函数的指令参数赋值或者获取存储起来
 const handerCommand =(e:string)=>{
    size.value = e
    localStorage.setItem('size',e)
    emit('changeSize',e)
    ElMessage.success('设置成功')
 }
</script>